<template>
  <el-card style="margin-bottom: 20px">
    <template #header>
      <div class="clearfix">
        <span>About me</span>
      </div>
    </template>

    <div class="user-profile">
      <div class="box-center">
        <el-upload
          class="upload"
          :show-file-list="false"
          name="avatar"
          action=""
          accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
          list-type="picture"
          :http-request="uploadAvatar"
          :on-success="uploadSuccess"
          :on-error="uploadError">
          <div class="avatar">
            <img class="image" :src="user.avatar" alt="编辑头像" />
            <span class="text">更换头像</span>
          </div>
        </el-upload>
      </div>
      <div class="box-center">
        <div class="user-name text-center">
          {{ user.nickname || user.username }}
        </div>
        <div class="user-info text-center text-muted">
          <svg-icon icon="ri-phone-line" />
          <span>{{ user.phone }}</span>
        </div>
        <div class="user-info text-center text-muted">
          <svg-icon icon="ri-mail-line" />
          <span>{{ user.email }}</span>
        </div>
        <!--        <div class="user-info user-account text-center text-muted">-->
        <!--          <svg-icon icon="ri-settings-4-line" />-->
        <!--          <span>账户设置</span>-->
        <!--        </div>-->
      </div>
    </div>

    <div class="user-bio">
      <div class="user-bio-section">
        <div class="user-bio-section-header">
          <svg-icon icon="ri-user-settings-line" />
          <span>Role</span>
        </div>
        <div class="user-bio-section-body">
          <div class="text-muted">
            <!-- {{ user.roles.join(',') }} -->
            {{ authorities.join(',') }}
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script lang="ts">
  import { accountService } from '@/services/security/LoginAccount';
  import { computed, defineComponent, onMounted, ref } from 'vue';
  import { useStore } from 'vuex';
  import { ElMessage } from 'element-plus';
  // import { ElUploadRequestOptions } from '@/utils/types';
  import { Info } from '@/store/modules/account/info';
  import { accessService } from '@/services/authorization/Access';
  import { HttpUtil } from '@/utils/HttpUtil';
  import { ElUploadRequestOptions } from '@/utils/types';

  export default defineComponent({
    name: 'UserCard',
    props: {
      user: {
        type: Object,
        required: true,
      },
    },
    setup() {
      const authorities = ref([] as string[]);

      onMounted(async () => {
        const info: Info = store.getters['account/info'];
        try {
          const resp = await accessService.selectByCodes(info.authorities);
          if (HttpUtil.isOk(resp)) {
            authorities.value = HttpUtil.getData(resp)
              .map(access => access.remark)
              .sort();
          }
        } catch (e) {
          // ElMessage.error((e as Error).message);
        }
      });

      const uploadAvatar = (param: ElUploadRequestOptions) => {
        console.log(param);
        accountService
          .upgradeAvatar(param.file)
          .then(() => {
            param.onSuccess('');
          })
          .catch(e => {
            param.onError(e);
          });
      };
      const uploadSuccess = () => {
        ElMessage.success('头像更新成功');
      };
      const uploadError = () => {
        ElMessage.error('头像更新失败！');
      };

      const store = useStore();
      return {
        upload: {
          headers: {
            Authorization: computed(() => store.getters['account/token']),
          },
          url: '/api/account/avatar',
        },
        authorities,
        uploadAvatar,
        uploadSuccess,
        uploadError,
      };
    },
  });
</script>

<style lang="scss" scoped>
  .box-center {
    margin: 0 auto;
    display: table;
  }

  .text-muted {
    color: #777777;
  }

  .user-profile {
    .user-name {
      font-weight: bold;
    }

    .box-center {
      padding-top: 10px;

      .upload {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin: 0 auto;

        .avatar {
          position: relative;
          width: 100px;
          height: 100px;
          vertical-align: middle;
          horiz-align: center;

          &:hover .text {
            opacity: 0.6;
          }

          .image {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            vertical-align: middle;
            horiz-align: center;
          }

          .text {
            color: #409eff;
            background-color: #ffffff;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            letter-spacing: 5px;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            opacity: 0;
            -webkit-transition: all 0.35s ease-in-out;
            -moz-transition: all 0.35s ease-in-out;
            transition: all 0.35s ease-in-out;
          }
        }
      }
    }

    .user-info {
      padding-top: 10px;
      font-weight: 400;
      font-size: 14px;

      .svg-icon {
        margin-right: 4px;
      }
    }

    .user-account {
      color: #409eff;

      &:hover {
        cursor: pointer;
      }
    }

    .box-social {
      padding-top: 30px;

      .el-table {
        border-top: 1px solid #dfe6ec;
      }
    }

    .user-follow {
      padding-top: 20px;
    }
  }

  .user-bio {
    margin-top: 20px;
    color: #606266;

    span {
      padding-left: 4px;
    }

    .user-bio-section {
      font-size: 14px;
      padding: 15px 0;

      .user-bio-section-header {
        border-bottom: 1px solid #dfe6ec;
        padding-bottom: 10px;
        margin-bottom: 10px;
        font-weight: bold;
      }
    }
  }
</style>
